<!doctype html>
<html lang="en" data-color-scheme="%color-scheme%">
	<head>
		<!-- general metadata tags -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF" />
		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
		<meta name="msapplication-TileColor" content="#201e1a" />

		<!-- favicons -->
		<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#ef4623" />
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="%sveltekit.assets%/images/favicon/favicon-16x16.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="%sveltekit.assets%/images/favicon/favicon-32x32.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="192x192"
			href="%sveltekit.assets%/images/favicon/favicon-192x192.png"
		/>

		<!-- Google fonts -->
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Finger+Paint&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap"
			rel="stylesheet"
		/>

		<!-- web manifest & well known resources -->
		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />

		<!-- SvelteKit Injected Header -->
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>
